<script>
import {defineComponent} from 'vue'
// 引入addCountButton组件
import addCountButton from "@/components/addCountButton.vue";
// 引入subCountButton组件
import subCountButton from "@/components/subCountButton.vue";

export default defineComponent({
  // name属性：用于显式声明组件展示时的名称。
  name: "App",
  //data函数：用于声明组件初始响应式状态的函数(必须return一个新对象)
  data() {
    return {
      count: 0,
    }
  },
  // methods:用于声明要混入到组件实例中的方法
  methods: {
    addcount(count) {
      this.count += count
    },
    subcount(count) {
      this.count -= count
    }
  },
  // components：一个对象，用于注册对当前组件实例可用的组件
  components: {
    addCountButton,
    subCountButton
  }
})
</script>

<template>
  <div class="app">
    <h1>App组件的count值是：{{ count }}</h1>
    <!--为子组件绑定addcount自定义事件，当子组件emtis(addcount,value)就执行对应的addcoun事件处理函数-->
    <addCountButton @addcount="addcount"></addCountButton>

    <!-- 为子组件绑定subcount自定义事件，当子组件emtis(subcount,value)就执行对应的subcount事件处理函数-->
    <subCountButton @subcount="subcount"></subCountButton>
  </div>
</template>

<style lang="less"></style>
